<template>
<div class="playlistHead" v-if="dataDe">
	<div class="headBg" :style="{backgroundImage: 'url('+dataDe.coverImgUrl+')'}" >
		
	</div>
	<div class="headwarp">
		<div class="headwarp-left">
			<img :src="dataDe.coverImgUrl" alt="" class="h-img" />
			<div class="thd-icon" v-show='!dataDe.highQuality'>歌单</div>
			<div class="thd-icon" v-show="dataDe.highQuality">精品歌单</div>
			<i class="thd-num"><earpod class="earpod" ></earpod>{{count(dataDe.playCount)}}</i>
		</div>
		<div class="headwarp-right">
			<div class="headwarp-title">{{dataDe.name}}</div>
			<div class="headwarp-auth">
				<div class="auth-warp">
					<img :src="dataDe.creator.avatarUrl" class="headImg"  />
					<!--黄色星星，未定义-->
					<!--<yellow-star></yellow-star>-->
					<span>{{dataDe.creator.nickname}}</span>
				</div>
			</div>
		</div>
		
	</div>
	
	
</div>

</template>

<script>
import earpod from '@/svg/earpod.svg'
import yellowStar from '@/svg/yellowStar.svg'
	
	
export default {
	name:'playlistHead',
	data(){
		return {
			
		}
	},
	props:{
//		dataDe:{
//			type:[String,Object],
//			default:function(){
//				return {
//					creator:{
//						avatarUrl:'123'
//					}
//				}
//				
//			}
//		}
		dataDe:{
			type:[String,Object]
		}
		
	},
	components:{
		earpod,
		yellowStar
	},
	methods:{
		count(num){
			if(num>100000000){
				return (num/100000000).toFixed(1)+'亿';
			}else if(num>10000&&num<100000000){
				return (num/10000).toFixed(1)+'万'
			}
		}
	},
	mounted(){
		
	},
	activated(){
		
	}
	
	
	
}
	
	
</script>

<style lang="scss">
@import '../scss/common';
@import '../scss/reset';

.headwarp-auth{
	text-align: left;
	display: block;
    position: relative;
    margin-top: r(40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.auth-warp{
	display: inline-block;
    width: r(60px);
    height: r(60px);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: r(10px);
    position: relative;
    font-size: 0;
    
    span{
    	color: hsla(0,0%,100%,.7);
    	font-size: r(28px);
    	margin-left: r(10px);
    	line-height: r(60px);
    }
}
.headImg{
	border-radius: 50%;
	width: 100%;
    vertical-align: r(-21px);
    position: relative;

}


.headwarp-right{
	-webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-left:r(32px);
}
.headwarp-title{
	text-align: left;
	padding-top: r(2px);
    font-size: r(34px);
    line-height: 1.3;
    color: #fefefe;
    height: r(88px);
    display: -webkit-box;
    -webkit-box-pack: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
   	word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
.playlistHead{
	position: relative;
    padding: r(60px) r(20px) r(60px) r(30px);
    overflow: hidden;
}	
.headBg{
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    &::after{
    	content: " ";
   		background-color: rgba(0,0,0,.25);
   		position: absolute;
	    left: 0;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 1;
    }
}
.headwarp{
	display: flex;
    position: relative;
    z-index: 2;
    .headwarp-left{
    	position: relative;
	    width: r(228px);
	    height: r(228px);
	    background-color: #e2e2e3;
	        &::after{
		    	content: " ";
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 100%;
			    height: r(36px);
			    z-index: 2;
			    background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.2));
		    }
    }
}
.h-img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.thd-icon{
	position: absolute;
    z-index: 3;
    top: r(20px);
    left: 0;
    padding: 0 r(16px);
    height: 17px;
    color: #fff;
    font-size: r(18px);
    text-align: center;
    line-height: r(34px);
    background-color: rgba(217,48,48,.8);
    border-top-right-radius: r(34px);
    border-bottom-right-radius: r(34px);
}
.thd-num{
	position: absolute;
    right: r(4px);
    top: 0;
    z-index: 3;
    padding-left: r(30px);
    color: #fff;
    font-size: r(24px);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: r(22px) r(20px);
    text-shadow: r(2px) 0 0 rgba(0,0,0,.15);
	font-style: normal;	


}
.earpod{
	width: r(22px);
	height: r(22px);
	margin-right: r(5px);
	margin-top: r(5px);
}
	
	
</style>